<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { LoginUser } from '../utils/IpcData'
import { useRouter } from 'vue-router'
import { handleUserLogOut } from '../utils/webSocketUtil'
import { ElMessage } from 'element-plus'
import { modifyPassword } from '../api/user'

const store = useStore()
const router = useRouter()

const modifyPasswordDialog = ref(false)
const oldPwd = ref('')
const newPwd = ref('')
const loader = ref(false)

onMounted(() => {
  document.querySelectorAll('.nav-menu').forEach((item) => {
    item.addEventListener('click', function () {
      document.querySelectorAll('.nav-menu').forEach((allItem) => {
        allItem.classList.replace('fill-green-400', 'fill-gray-400')
      })
      item.classList.replace('fill-gray-400', 'fill-green-400')
    })
  })
  showView('resent')
})

const handleShowUser = () => {
  window.electron.ipcRenderer.send(
    'show-user-profile',
    new LoginUser(
      store.getters.getUserId,
      store.getters.getUserNickname,
      store.getters.getUserAvatar
    )
  )
}

const showView = (path: string) => {
  store.commit('SET_PATH', path)
  store.commit('SET_ACTIVE_INDEX', '')
  store.dispatch('FlushAllChatMessage')
}

const props = defineProps({
  hasNewMessage: Boolean,
  hasFriendNotification: Boolean
})

const openModifyPassword = () => {
  modifyPasswordDialog.value = true
  oldPwd.value = ''
  newPwd.value = ''
}

const handleModifyPassword = () => {
  loader.value = true
  modifyPassword(store.getters.getUserId, oldPwd.value, newPwd.value).then((res) => {
    if (res.code === 200) {
      handleUserLogOut()
      window.electron.ipcRenderer.send('handle-disconnect-websocket')
      router.push('/')
      ElMessage.success(res.msg + ',请重新登录')
    }
  })
  loader.value = false
}

const handleLogout = () => {
  handleUserLogOut()
  window.electron.ipcRenderer.send('handle-disconnect-websocket')
  router.push('/')
  ElMessage.success('退出登录成功')
}
</script>

<template>
  <div class="h-full flex flex-col">
    <ul class="list-none pt-5" style="height: 30%">
      <li class="flex justify-center hover:cursor-pointer" @click="handleShowUser">
        <img class="h-10 w-10" alt="Wails logo" :src="store.getters.getUserAvatar" />
      </li>

      <li
        class="flex justify-center mt-5 mb-3 nav-menu hover:cursor-pointer fill-green-400"
        title="最近聊天"
        @click="showView('resent')"
      >
        <el-badge :is-dot="props.hasNewMessage">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7">
            <path
              d="M620.8 819.2l-70.4 89.6c-12.8 19.2-44.8 25.6-64 6.4l-6.4-6.4-70.4-89.6H198.4c-76.8 0-134.4-57.6-134.4-134.4V230.4c0-76.8 57.6-134.4 134.4-134.4h627.2c76.8 0 134.4 57.6 134.4 134.4v454.4c0 76.8-57.6 134.4-134.4 134.4H620.8zM307.2 512c25.6 0 51.2-25.6 51.2-51.2s-25.6-51.2-51.2-51.2-51.2 25.6-51.2 51.2c0 32 25.6 51.2 51.2 51.2z m198.4 0c25.6 0 51.2-25.6 51.2-51.2s-25.6-51.2-51.2-51.2-44.8 25.6-44.8 51.2c0 32 19.2 51.2 44.8 51.2z m204.8 0c25.6 0 51.2-25.6 51.2-51.2s-25.6-51.2-51.2-51.2-51.2 25.6-51.2 51.2c0 32 25.6 51.2 51.2 51.2z"
            ></path>
          </svg>
        </el-badge>
      </li>

      <li
        class="flex justify-center mb-3 nav-menu hover:cursor-pointer fill-gray-400"
        title="好友"
        @click="showView('friend')"
      >
        <el-badge :is-dot="props.hasFriendNotification">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7">
            <path
              d="M882.607224 620.289332c-32.233122-46.50108-75.778894-81.46643-126.399805-101.611236 22.323425-15.70468 41.104163-36.645618 54.679343-61.067844 15.711843-28.26781 24.01802-60.572564 24.01802-93.420693 0-102.397135-79.284741-185.704492-176.739307-185.704492-13.83817 0-25.097608 11.258415-25.097608 25.097608 0 13.855566 11.259438 25.128307 25.097608 25.128307 69.742411 0 126.482693 60.775178 126.482693 135.478578 0 74.719772-56.739259 135.50723-126.482693 135.50723-13.83817 0-25.097608 11.265578-25.097608 25.112957l0 0.1361c0 13.855566 11.259438 25.128307 25.097608 25.128307 125.46348 0 227.536226 108.816335 227.536226 242.568594 0 13.872962 11.285021 25.159006 25.157983 25.159006 13.83817 0 25.097608-11.286044 25.097608-25.159006C935.958316 730.243583 917.509129 670.644183 882.607224 620.289332z"
            ></path>
            <path
              d="M623.157147 577.673745c-26.348088-18.662035-55.000662-33.399691-85.316108-43.895743 64.020082-38.906102 103.316064-108.150162 103.316064-183.412286 0-118.333082-96.263437-214.604706-214.588333-214.604706-118.358665 0-214.649731 96.271624-214.649731 214.604706 0 40.289612 11.282974 79.585593 32.630165 113.642247 18.054191 28.803 42.605354 52.879348 71.567989 70.318532-30.826076 10.523681-59.94937 25.424042-86.697571 44.369533-29.125341 20.629853-54.761208 45.569872-76.194356 74.126254-44.566008 59.375296-68.122517 130.018216-68.122517 204.28978 0 13.83817 11.258415 25.097608 25.097608 25.097608 13.855566 0 25.128307-11.259438 25.128307-25.097608 0-77.456093 30.202882-150.434198 85.043908-205.489094 54.711066-54.924937 127.125329-85.206614 203.921389-85.283362 2.535753 0.225127 5.117554 0.047072 7.631818-0.515746l1.991354-0.446162c74.719772 1.51347 144.95337 31.659047 198.329021 85.261872 54.815443 55.04978 85.003999 128.013559 85.003999 205.448162 0 13.83817 11.272741 25.097608 25.128307 25.097608 13.83817 0 25.097608-11.259438 25.097608-25.097608 0-74.271564-23.556509-144.913461-68.121494-204.28978C677.918355 623.243617 652.282488 598.303598 623.157147 577.673745zM426.56877 186.002274c90.629113 0 164.362418 73.733305 164.362418 164.363442 0 90.638323-73.733305 164.378791-164.362418 164.378791-90.647533 0-164.393117-73.740468-164.393117-164.378791C262.17463 259.735579 335.921237 186.002274 426.56877 186.002274z"
            ></path>
          </svg>
        </el-badge>
      </li>
    </ul>

    <div class="flex-1" style="-webkit-app-region: drag"></div>

    <el-menu mode="horizontal" style="background: rgb(55 65 81 / var(--tw-bg-opacity))">
      <el-menu-item @click="openModifyPassword()">修改密码</el-menu-item>
      <el-menu-item @click="handleLogout()">退出登录</el-menu-item>
    </el-menu>

    <el-dialog v-model="modifyPasswordDialog" width="500" align-center>
      <div v-loading="loader" class="flex flex-col justify-center items-center mt-5">
        <div class="w-72 text-left">
          <label for="oldPwd" class="text-gray-500" style="font-size: 15px">原始密码</label>
          <el-input
            id="oldPwd"
            v-model="oldPwd"
            type="password"
            style="width: 300px; font-size: 15px"
            class="mt-2"
            name="nickname"
            placeholder="请输入原始密码"
          />
        </div>

        <div class="mt-5 w-72 text-left">
          <label for="newPwd" class="text-gray-500" style="font-size: 15px">新密码</label>
          <el-input
            id="newPwd"
            v-model="newPwd"
            type="password"
            style="width: 300px; font-size: 15px"
            class="mt-2"
            name="nickname"
            placeholder="请输入新密码"
          />
        </div>

        <div class="flex justify-center mt-4">
          <el-button
            style="width: 200px; font-size: 16px"
            type="primary"
            @click="handleModifyPassword"
            >修&nbsp;改&nbsp;密&nbsp;码</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
/deep/ .el-sub-menu__title {
  max-width: 50px !important;
  width: 50px !important;
  padding: 0 !important;
  border-bottom-width: 0 !important;
  justify-content: center !important;
  color: white !important;
}

/deep/ .el-sub-menu__title:hover {
  background: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
}
</style>
